<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    
    <!-- 
       自己机子启动myapi报错解决办法:
        => https://blog.csdn.net/weixin_45912307/article/details/104335311
    -->

    <script>
        /*
        var ret = '----'
        $.ajax({
            url:'http://localhost:3000/data',
            success:function(data){
                ret = data;
                console.log(ret)
            }
        })
        // 这里打印不出来的原因是 上面的方法是异步的,顺序不确定
        console.log(ret)
        */

        // 下面的异步不一定是顺序调用的,因为是异步的
        /*
        $.ajax({
            url:'http://localhost:3000/data',
            success:function(data){
                console.log(data)
            }
        })

        $.ajax({
            url:'http://localhost:3000/data1',
            success:function(data){
                console.log(data)
            }
        })

        $.ajax({
            url:'http://localhost:3000/data2',
            success:function(data){
                console.log(data)
            }
        })
        */

        // 异步调用结果如果存在依赖需要嵌套
        // Promise 可以避免多层异步调用嵌套问题(回调地域)
        $.ajax({
            url:'http://localhost:3000/data',
            success:function(data){
                console.log(data)
                $.ajax({
                    url:'http://localhost:3000/data1',
                    success:function(data){
                        console.log(data)
                        $.ajax({
                            url:'http://localhost:3000/data2',
                            success:function(data){
                                console.log(data)
                            }
                        })
                    }
                })
            }
        })
    </script>

</body>
</html>